<script setup lang="ts">
import { onBeforeMount, ref, watch } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import { useColumns } from "./utils/columns";
const selectRef = ref();
const { columns, pagination, selectValue, dataList, rowStyle } = useColumns();
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    Id: "",
    status: 0,
    corpId: "",
    number: "",
    type: 0,
    brand: "",
    model: "",
    remarks: "",
    title: "",
    vehicleId: 0,
    attachment: []
  })
});
const statusOptions = [
  {
    value: 1,
    label: "启用"
  },
  {
    value: 2,
    label: "禁用"
  }
];
const typeOptions = [
  {
    value: 1,
    label: "小型车"
  },
  {
    value: 2,
    label: "微型车"
  },
  {
    value: 3,
    label: "紧凑车型"
  },
  {
    value: 4,
    label: "中等车型"
  },
  {
    value: 5,
    label: "高级车型"
  },
  {
    value: 6,
    label: "豪华车型"
  },
  {
    value: 7,
    label: "三厢车型"
  },
  {
    value: 8,
    label: "CDV车型"
  },
  {
    value: 9,
    label: "MPV车型"
  },
  {
    value: 10,
    label: "SUV车型"
  }
];
const brandOptions = [
  {
    value: "audi",
    label: "奥迪 (Audi)"
  },
  {
    value: "bmw",
    label: "宝马 (BMW)"
  },
  {
    value: "mercedes-benz",
    label: "奔驰 (Mercedes-Benz)"
  },
  {
    value: "skoda",
    label: "斯柯达 (Skoda)"
  },
  {
    value: "chevrolet",
    label: "雪佛兰 (Chevrolet)"
  },
  {
    value: "chrysler",
    label: "克莱斯勒 (Chrysler)"
  },
  {
    value: "dodge",
    label: "道奇 (Dodge)"
  },
  {
    value: "ford",
    label: "福特 (Ford)"
  },
  {
    value: "volkswagen",
    label: "大众 (Volkswagen)"
  },
  {
    value: "volvo",
    label: "沃尔沃 (Volvo)"
  },
  {
    value: "wiesmann",
    label: "威兹曼 (Wiesmann)"
  },
  {
    value: "bentley",
    label: "宾利 (Bentley)"
  },
  {
    value: "rolls-royce",
    label: "劳斯莱斯 (Rolls-Royce)"
  },
  {
    value: "land rover",
    label: "路虎 (Land Rover)"
  },
  {
    value: "jaguar",
    label: "捷豹 (Jaguar)"
  },
  {
    value: "alfa romeo",
    label: "阿尔法罗密欧 (Alfa Romeo)"
  },
  {
    value: "ferrari",
    label: "法拉利 (Ferrari)"
  },
  {
    value: "maserati",
    label: "玛莎拉蒂 (Maserati)"
  },
  {
    value: "lamborghini",
    label: "兰博基尼 (Lamborghini)"
  },
  {
    value: "spyker",
    label: "世爵 (Spyker)"
  },
  {
    value: "pagani",
    label: "帕加尼 (Pagani)"
  },
  {
    value: "austin",
    label: "奥斯汀 (Austin)"
  },
  {
    value: "rover",
    label: "罗孚 (Rover)"
  },
  {
    value: "mini",
    label: "迷你 (Mini)"
  },
  {
    value: "mg",
    label: "名爵 (MG)"
  },
  {
    value: "subaru",
    label: "斯巴鲁 (Subaru)"
  },
  {
    value: "mazda",
    label: "马自达 (Mazda)"
  },
  {
    value: "mitsubishi",
    label: "三菱 (Mitsubishi)"
  },
  {
    value: "nissan",
    label: "日产 (Nissan)"
  },
  {
    value: "infiniti",
    label: "英菲尼迪 (Infiniti)"
  },
  {
    value: "toyota",
    label: "丰田 (Toyota)"
  },
  {
    value: "honda",
    label: "本田 (Honda)"
  },
  {
    value: "suzuki",
    label: "铃木 (Suzuki)"
  },
  {
    value: "yamaha",
    label: "雅马哈 (Yamaha)"
  }
];
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
const isPark = ref(false);
const ifDisabled = ref(false);
watch(isPark, () => {
  ifDisabled.value = isPark.value;
  if (isPark.value) {
    newFormInline.value.corpId = 0;
  }
});
/** 行点击 */
function onRowClick(row) {
  selectValue.value = row.name;
  selectRef.value.blur();
  newFormInline.value.corpId = row.corpId;
}
//上传车辆图片
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

const imageUrl = ref("");
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  newFormInline.value.attachment = [baseOaApi + response.result.path];
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  if (
    rawFile.type !== "image/jpeg" &&
    rawFile.type !== "image/jpg" &&
    rawFile.type !== "image/png"
  ) {
    ElMessage.error("图片仅支持image/jpeg/png格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 20) {
    ElMessage.error("照片不能超过20MB!");
    return false;
  }
  return true;
};
onBeforeMount(() => {
  if (newFormInline.value.corpId === 0) {
    isPark.value = true;
  }
  if (newFormInline.value.title === "修改") {
    imageUrl.value = newFormInline.value.attachment[0];
  }
});
import { baseUrlApi, baseOaApi } from "@/api/utils";
const action = baseUrlApi + "/uploadFile/upload";
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="auto"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="车牌号" prop="number">
          <el-input
            v-model="newFormInline.number"
            clearable
            placeholder="请输入车牌号"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="车辆类型" prop="type">
          <el-select
            v-model="newFormInline.type"
            placeholder="请选择车辆类型"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="车辆照片" prop="attachment">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <el-tag size="large" style="margin-top: 10px" type="danger"
            >注:车辆高度不能超过4.2米</el-tag
          >
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="品牌" prop="brand">
          <el-select
            v-model="newFormInline.brand"
            placeholder="请选择车辆品牌"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in brandOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="型号" prop="model">
          <el-input
            v-model="newFormInline.model"
            clearable
            placeholder="请输入车辆型号"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="newFormInline.status"
            placeholder="请选择状态"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="newFormInline.remarks"
            placeholder="备注"
            type="textarea"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
